<template>
	<view class="collection-list">
		<u-navbar
			title="我的收藏"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		
		<view class="goods-list" v-if="collectionList.length > 0">
				<view class="goods-list-item" v-for="item in collectionList" :key="item['id']" 
				@click="handleGoodsClick(item['id'])">
					<view class="goods-image">
					<image :src="item['image']"></image>
				</view>
				<view class="goods-info">
					<u--text :lines="2" :size="12"
						   :text="item.name" ></u--text>
					<view class="goods-price">
					<text>到手价</text>
						<u--text :block="true" :text="'￥'+item['price']" :size="16" type="error"></u--text>
					</view>
					<u--text :text="'已售：'+ item['sold']" :size="12" type="info"></u--text>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,getCurrentInstance,onMounted} from 'vue'
	import type { ICollection } from "@/types/collection"
	
	const { proxy }: any = getCurrentInstance()
	const collectionList = ref<ICollection[]>([])
	
	const handleGoodsClick = (id: number) => {
		uni.navigateTo({
			url: '/goods/goods_detail/goods_detail?id=' + id
		})
	}
	
	onMounted(()=>{
		let storageInfo = uni.getStorageSync("info")
		proxy.ajax(proxy.api.getCollection, "POST", { userId: storageInfo.id }, function(resp: any){
			collectionList.value = resp.data.collection
		})
	})
</script>

<style lang="scss">
.collection-list{
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}
</style>
